<html>
    <head>
        <title>表单输入信息绑定</title>
    </head>
    <body>
        <script>
            // ★、表单数据绑定

                                /*
                                    你可以用 v-model 指令在表单 <input>、<textarea>及 <select> 元素上创建双向数据绑定。
                                    它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model 本质上不过是语法糖。
                                    它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
                                */

                                /*
                                    注意：
                                            v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将Vue实例的数据作为数据来源。
                                            你应该通过 JavaScript 在组件的 data 选项中声明初始值。
                                */

                                /*
                                    v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
                                        
                                            ①、text 和 textarea 元素使用过 value property 和 input 事件
                                            ②、checkbox 和 radio 使用 checked property 和 change 事件
                                            ③、select 字段将 value 作为 prop 并将 change 作为事件。
                                */

                        // ★一、 文本
                                        /*
                                            eg:
                                                <input v-model="message" placeholder="edit me">
                                                <p>Message is:{{message} } </p>
                                        */
                        
                        // ★二、多行文本
                                        /*
                                            eg:
                                                <span>Multiline message is:</span>
                                                <p style="white-space:pre-line">{{message}} </p>
                                                <br>
                                                <textarea v-model="message" placeholder="add multiple lines"></textarea>
                                        */

                                        /*
                                            注意：

                                                在文本域中插值 ( <textarea>{{text<}}/textarea> ) 是不会生效的，
                                                应该使用 v-model 代替。
                                        */
                    
                        // ★三、复选框
                                        /*
                                           ★、 单个复选框绑定到布尔值：

                                                    <input type="checkbox" id="checkbox" v-model="checked">
                                                    <label for="checkbox">{{ checked }} </label
                                        */

                                        /*
                                           ★、多个复选框绑定到同一个数组
                                                    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
                                                    <label for="jack">Jack</lable>

                                                    <input type="checkbox" id="john" value="John" v-model="checkedNames">
                                                    <label for="john">John</lable>

                                                    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"
                                                    <label for="mike">Mike</lable>
                                        */
                                                  new View({
                                                    el:'',
                                                    data:{
                                                        checkedNames:[]
                                                    }
                                                  });     
                                            
                        // ★四、单选按钮
                                        /*
                                                    <div di="example-4">
                                                        <input type="radio" id="one" value="One" v-model="picked">
                                                        <label for="one">One</label>
                                                        <br>
                                                        <inpt type="radio" id="two" value="Two" v-model="picked">
                                                        <label for="two">Two</label>

                                                        <span>Picked:{{ picked }}</span>
                                                    </div>
                                        */
                                                    new Vue({
                                                        el:'#example-4',
                                                        data:{
                                                            picked:''
                                                        }
                                                    });
  
                        // ★五、下拉选择框

                                        /*
                                                ★、单选
                                                    <div id="example-5">
                                                        <select v-model="selected">
                                                            <options disabled value="">请选择</options>
                                                            <option>A</option>
                                                            <options>B</option>
                                                            <options>C</option>
                                                        </select>
                                                        <span>Selected:{{ selected}} </span>
                                                    </div>

                                                    如果 v-model 表达式的初始值未能匹配任何选项，<select>元素将被渲染为"未选中"状态。
                                                在IOS中， 这会使用户无法选择第一个选项。因为这样的情况下，ios不会触发 change 事件。
                                                因此，更推荐像上面这样提供一个值为空的禁用选项。
                                        */
                                                    new Vue({
                                                        el:'...',
                                                        data:{
                                                            selected:''
                                                        }
                                                    });

                                        
                                        /*
                                                ★、多选 (绑定到一个数组)
                                                    <div id="example-6">
                                                        <select v-model="selected" multiple style="width:50px">
                                                            <option>A</option>
                                                            <option>B</option>
                                                            <option>C</option>
                                                        </select>
                                                        <br>
                                                        <span>Selected:{{selected}}</span>
                                                    </div>
                                        */
                                                    new Vue({
                                                        el:'#example-6',
                                                        data:{
                                                            selected:[]
                                                        }
                                                    });

                                        /*
                                                ★、用　v-for 渲染动态选项
                                                    <select v-model="selected">
                                                        <option v-for="option in options" v-bind:value="option.value">
                                                            {{ option.text }}
                                                        </option>
                                                    </select>
                                        */
                                                    new Vue({
                                                        el:'...',
                                                        data:{
                                                            selected:'A',
                                                            options:{
                                                                { text: 'One', value: 'A' },
                                                                { text: 'Two', value: 'B' },
                                                                { text: 'Three', value: 'C' }
                                                            }
                                                        }
                                                    });

        </script>
    </body>
</html>